<script setup lang="ts">
import Menu from '@/components/Menu.vue'
import { Fold, Expand } from '@element-plus/icons-vue'
import { ref, type Ref, onMounted } from 'vue'
import { getUserFromStore, removeUserFromStore } from '@/common/useStore'
import { useRouter } from 'vue-router'

let asideWidth = ref<string>('200px')
let isCollapse = ref<boolean>(true) // 收缩展开菜单
let user: Ref<{ nick: string; url: string }> = ref({ nick: '', url: '' })
const router = useRouter()

onMounted(() => {
    const user1 = getUserFromStore()
    user.value = { ...user1 }
})
/**
 * 收缩展开按钮
 */
const onFlodExpand = () => {
    isCollapse.value = !isCollapse.value
    asideWidth.value = isCollapse.value?'200px':'70px'
}

/**
 *  退出
 */
const onLogout = () => {
    removeUserFromStore()
    localStorage.removeItem('TOKEN')
    localStorage.removeItem('ROLE_ID')
    //调用退出接口
    router.replace('/login')
}
</script>

<template>
    <el-container>
        <el-aside
            :width="asideWidth"
        >
            <div class="logo">
                <el-image
                    style="width: 30px; height: 30px"
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F2736424c8c107adaf0917de571b2dfb48b76555514d3d-gUTXtZ_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672923011&t=8bc800c59e102e4efdcaf3e0d5575c80"
                />
                <h4 v-show="isCollapse">饱了么后台管理</h4>
            </div>
            <p class="home-title">首页</p>
            <!-- 菜单组件 -->
            <Menu :isCollapse="isCollapse"></Menu>
        </el-aside>
        <el-container>
            <el-header>
                <!-- 收缩菜单 -->
                <el-icon :size="30" @click="onFlodExpand">
                    <component :is="isCollapse ? Fold : Expand"></component>
                </el-icon>
                <!-- 个人中心 -->
                <div>
                    <span class="title">欢迎您 {{ user.nick }}</span>
                    <el-dropdown trigger="click">
                        <el-avatar shape="square" :size="30" :src="user.url" />
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>设置</el-dropdown-item>
                                <el-dropdown-item @click="onLogout"
                                    >退出</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <!-- 面包屑  route router  -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
.el-container {
    width: 100%;
    height: 100vh;
    .el-aside {
        background-color: #2d3436;
        transition: 0.3s;
        .logo {
            display: flex;
            color: white;
            padding: 2px 20px;
            align-items: center;
            height: 50px;
            h4 {
                margin-left: 10px;
            }
        }
        .home-title {
            padding-left: 20px;
            color: rgb(212, 212, 9);
        }
        .el-menu {
            border-right: 0;
        }
    }
    .el-container {
        .el-header {
            background-color: #7f8fa6;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
                margin-right: 5px;
            }
        }
    }
}
</style>
